<template>
	<view class="content">
		<view class="backGround" :style="{background: `url(${userinfo.user_bg})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround" :style="{background: `url(${userinfo.user_bg})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex center align-items">
							<view class="font-size-28 font-weight-500">
								个人中心
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="display-flex flex-direction-column space-between" style="height: 452rpx;">
				<view class="padding-about-24">
					<view v-bind:style="{height: (s+n) +'px' }" class="" />
					<!-- navigateTo('/pages/Mine/useinfo/useinfo') -->
					<view @tap="popup.open()"
						class="display-flex align-items margin-top-20">
						<image :src="userinfo.headimg" class="avatar border-radius" mode="aspectFill"></image>
						<view class="margin-left-20 file-1 display-flex align-items">
							<view class="file-1">
								<view class="display-flex align-items">
									<view class="font-size-32 font-weight-bold">
										{{userinfo.nickname || "点我输入昵称！"}}
									</view>
									<image :src="userinfo?.level?.icon" class="margin-left-10"
										style="width: 111.45rpx;height: 32rpx;" mode="aspectFill">
									</image>
								</view>
								<view @tap.stop="setClipboardData(userinfo.id)"
									class="display-flex margin-top-05 align-items">
									<view class="font-size-22 " style="color: #434343;">
										UID:{{userinfo.id}}
									</view>
									<image :src="imgaeUrl('/static/mine/copy.png')" class="margin-left-10"
										style="width: 24rpx;height: 24rpx;" mode="aspectFill">
									</image>
								</view>
							</view>
							<view @click.stop="navigateTo('/pages/Home/mentor/mentor')"
								class="button display-flex center align-items">
								我的导师
							</view>
						</view>
					</view>
				</view>
				<view class="position-relative" style="width: 100%;height: 72rpx;">
					<view
						class="position-absolute vip transform-translate-center display-flex space-between align-items"
						style="top: -4rpx; left: 50%;">
						<view class="display-flex align-items">
							<image :src="imgaeUrl('/static/mine/vip.png')"
								style="margin-left: 16rpx; width: 40rpx;height: 40rpx;" mode=""></image>
							<view class="font-size-28 font-weight-bold" style="color: #F8D893;margin-left: 12rpx;">
								{{userinfo.desc}}
							</view>
						</view>
						<!-- <view style="margin-right: 16rpx;" class="button1 display-flex center align-items">
							查看详情
						</view> -->
					</view>
					<image :src="imgaeUrl('/static/mine/vip-bg.png')" style="width: 100%;height: 72rpx;"></image>
				</view>
			</view>
			<view class="padding-about-24">
				<view class="view">
					<view class="display-flex align-items">
						<view @click="nativeUI('正在开发中')" class="display-flex space-between align-items"
							style="width: 50%;padding: 24rpx;">
							<view class="">
								<view class="font-size-28 font-weight-500">
									签到
								</view>
								<view class="font-size-22 margin-top-05 color-999">
									连续签到有奖励
								</view>
							</view>
							<image :src="imgaeUrl('/static/mine/sign.png')" style="width: 80rpx;height: 80rpx;" mode="">
							</image>
						</view>
						<view style="border-left: 1rpx solid #F1F1F1;height: 88rpx;"></view>
						<view @click="navigateTo('/pages/Home/Invitefriends/Invitefriends')"
							class="display-flex space-between align-items" style="width: 50%;padding: 24rpx;">
							<view class="">
								<view class="font-size-28 font-weight-500">
									推广
								</view>
								<view class="font-size-22 margin-top-05 color-999">
									一键分享赚收益
								</view>
							</view>
							<image :src="imgaeUrl('/static/mine/promotion.png')" style="width: 80rpx;height: 80rpx;"
								mode=""></image>
						</view>
					</view>
					<view class="padding-about-24">
						<view style="border-top: 1rpx solid #F1F1F1;"></view>
					</view>
					<view class="display-flex align-items">
						<view @click="navigateTo('/pages/Mine/collection/collection')"
							class="display-flex space-between align-items" style="width: 50%;padding: 24rpx;">
							<view class="">
								<view class="font-size-28 font-weight-500">
									收藏
								</view>
								<view class="font-size-22 margin-top-05 color-999">
									管理感兴趣内容
								</view>
							</view>
							<image :src="imgaeUrl('/static/mine/collect.png')" style="width: 80rpx;height: 80rpx;"
								mode=""></image>
						</view>
						<view style="border-left: 1rpx solid #F1F1F1;height: 88rpx;"></view>
						<view @click="navigateTo('/pages/Mine/footprint/footprint')"
							class="display-flex space-between align-items" style="width: 50%;padding: 24rpx;">
							<view class="">
								<view class="font-size-28 font-weight-500">
									足迹
								</view>
								<view class="font-size-22 margin-top-05 color-999">
									记录你的每次查看
								</view>
							</view>
							<image :src="imgaeUrl('/static/mine/footprint.png')" style="width: 80rpx;height: 80rpx;"
								mode=""></image>
						</view>
					</view>
				</view>
				<view @click="switchTab('/pages/Mine/mineOrder/mineOrder')" class="order margin-top-20">
					<view class="display-flex space-between align-items">
						<view class="font-size-28 font-weight-500 ">
							我的订单
						</view>
						<view class="display-flex align-items">
							<view class="font-size-22" style="color: #8C8C8C;">
								订单明细
							</view>
							<image :src="imgaeUrl('/static/mine/right.png')" class="margin-left-08"
								style="width: 15rpx;height: 24rpx;" mode=""></image>
						</view>
					</view>
					<view class="margin-top-20  space-between display-flex ">
						<view v-for="item,index in orderNavlist" :key="index"
							class="display-flex center align-items flex-direction-column">
							<view class="position-relative" style="width: 48rpx;height: 48rpx;">
								<!-- <view
									class="  display-flex center align-items transform-translate-center font-size-22 color-FFF border-radius"
									style="width: 24rpx;height: 24rpx; top: 0;right: -39rpx; background: #;">
									{{}}
								</view> -->
								<view class="position-absolute transform-translate-right" style="top: 0%;right:-50%;">
									<uv-badge bgColor="#FC1A76" max="99" :value="item.num"></uv-badge>
								</view>
								<image :src="item.image" style="width: 48rpx;height: 48rpx;" mode=""></image>
							</view>
							<view class="font-size-24 margin-top-05 color-333">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view @click="navigateTo('/pages/Home/incomeDetails/incomeDetails')" class="view margin-top-20"
					style="padding: 24rpx;">
					<view class="display-flex space-between align-items">
						<view class="display-flex align-items ">
							<view class="font-size-28 font-weight-500 ">
								我的收益
							</view>
							<view class="label display-flex margin-left-10 center align-items">
								每月25号可提现上月的订单收益
							</view>
						</view>
						<view @tap.stop="navigateTo('/pages/Mine/Withdrawal/Withdrawal')"
							class="display-flex align-items">
							<view class="font-size-22" style="color: #8C8C8C;">
								提现
							</view>
							<image :src="imgaeUrl('/static/mine/right.png')" class="margin-left-08"
								style="width: 15rpx;height: 24rpx;" mode=""></image>
						</view>
					</view>
					<view class="display-flex margin-top-30 align-items">
						<view class="" style="width: 50%;">
							<view class="font-size-22" style="color: #8C8C8C;">
								余额 (元)
							</view>
							<view class="font-size-36 margin-top-05 font-weight-bold">
								{{income.money}}
							</view>
						</view>
						<view style="border-left: 1rpx solid #F1F1F1;height: 88rpx;"></view>
						<view class="display-flex  align-items flex-direction-column" style="width: 50%;">
							<view class="">
								<view class="font-size-22" style="color: #8C8C8C;">
									今日收益 (元)
								</view>
								<view style="color: #FD1875;" class="font-size-36 margin-top-05 font-weight-bold">
									{{income.today_money}}
								</view>
							</view>
						</view>
					</view>
					<view class="margin-top-20" style="border-top: 1rpx solid #F1F1F1;"></view>
					<view class="display-flex margin-top-20 align-items space-between">
						<view class="">
							<view class="font-size-22" style="color: #8C8C8C;">
								昨日收益 (元)
							</view>
							<view class="font-size-28 margin-top-05 font-weight-bold">
								{{income.yestoday_money}}
							</view>
						</view>
						<view class="">
							<view class="font-size-22" style="color: #8C8C8C;">
								本月收益 (元)
							</view>
							<view class="font-size-28 margin-top-05 font-weight-bold">
								{{income.month_money}}
							</view>
						</view>
						<view class="">
							<view class="font-size-22" style="color: #8C8C8C;">
								上月收益 (元)
							</view>
							<view class="font-size-28 margin-top-05 font-weight-bold">
								{{income.last_month_money}}
							</view>
						</view>
					</view>
				</view>
				<view class="view display-flex space-around align-items	 margin-top-20" style="padding: 24rpx;">
					<view @click="navigateTo('/pages/Home/incomeDetails/incomeDetails')"
						class="display-flex center align-items flex-direction-column">
						<image :src="imgaeUrl('/static/mine/income.png')" style="width: 48rpx;height: 48rpx;" mode="">
						</image>
						<view class="font-size-24 margin-top-10 color-333">
							我的收益
						</view>
					</view>
					<view @click="switchTab('/pages/Mine/mineOrder/mineOrder')" style="margin: 0 150rpx;"
						class="display-flex center align-items flex-direction-column">
						<image :src="imgaeUrl('/static/mine/order.png')" style="width: 48rpx;height: 48rpx;" mode="">
						</image>
						<view class="font-size-24 margin-top-10 color-333">
							我的订单
						</view>
					</view>
					<view @click="navigateTo('/pages/Mine/team/team')"
						class="display-flex center align-items flex-direction-column">
						<image :src="imgaeUrl('/static/mine/fans.png')" style="width: 48rpx;height: 48rpx;" mode="">
						</image>
						<view class="font-size-24 margin-top-10 color-333">
							我的粉丝
						</view>
					</view>
				</view>
				<view class="margin-top-20"   v-if="swiperlist.length != 0" >
					<uv-swiper keyName="images" @click="swiperClick" height="148rpx" radius="12" indicator indicatorActiveColor="#FE6047"
						indicatorMode="line" :list="swiperlist"></uv-swiper>
				</view>
				<view class="view margin-top-20" style="padding: 24rpx;" >
					<view class="font-size-28 font-weight-500 ">
						我的服务
					</view>
					<view class="item-view margin-top-40">
						<!-- <view  class="display-flex center align-items flex-direction-column">
							<image src="/static/huiy.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
							<view class="font-size-24 margin-top-10 color-333">
								会员授权
							</view>
						</view> -->
						<button @tap="addPushUser()" class="display-flex center align-items flex-direction-column">
							<image :src="imgaeUrl('/static/huiy.png') " class="" style="width: 48rpx;height: 48rpx;" mode=""></image>
							<view class="font-size-24 color-333">
								会员授权
							</view>
						</button>
						<button open-type="contact" session-from="weapp"
							class="display-flex center align-items flex-direction-column">
							<image :src="imgaeUrl('/static/kf.png')" class="" style="width: 48rpx;height: 48rpx;" mode=""></image>
							<view class="font-size-24 color-333">
								联系客服
							</view>
						</button>
						<button v-for="item,index in toolslist" @tap="navigateTo(item.link_url)" :key="index"
							class="display-flex center align-items flex-direction-column">
							<image :src="item.image" style="width: 48rpx;height: 48rpx;" mode=""></image>
							<view class="font-size-24 color-333">
								{{item.name}}
							</view>
						</button>
					</view>

				</view>
			</view>
			<div class="kong"></div>
			<div class="kong"></div>
			<div class="kong safe-area-inset-bottom"></div>
		</view>
		<u-tabbar :current="3"></u-tabbar>
		<uv-popup ref="popup" mode="bottom" round="10">
			<view class="" style="height: 30vh;padding: 24rpx;">
				<view class="display-flex align-items">
					<image :src="local.get('config').logo" style="width: 50rpx;height: 50rpx;" class="border-radius"
						mode=""></image>
					<image :src="local.get('config').backstage_side_logo" style="width: 120rpx;height: 50rpx;"
						class="margin-left-20" mode="widthFix"></image>
				</view>
				<view class="text-center font-size-26 color-999 margin-top-40">
					建议使用您的微信头像和昵称，以便获得更好的体验
				</view>
				<view class="display-flex align-items margin-top-20" style="padding: 24rpx 0;">
					<view style="width: 100rpx;" class="font-size-28 font-weight-500">
						<text style="color: red;">*</text>头像
					</view>
					<view class=" margin-left-20">
						<button class="select-avatar" hover-class="none" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							<image style="width: 100%;height: 100%;border-radius: 50%;" :src="userinfo.headimg" v-if="userinfo.headimg" />
							<view class="select-btn" v-else>
								添加图片
							</view>
						</button>
					</view>
				</view>
				<view class="display-flex align-items" style="padding: 24rpx 0;">
					<view style="width: 100rpx;" class="font-size-28 font-weight-500">
						<text style="color: red;">*</text>昵称
					</view>
					<view class=" margin-left-20">
						<input v-model="userinfo.nickname" class="font-size-26 font-weight-500" type="nickname" placeholder="输入昵称" />
					</view>
				</view>
				<view class="display-flex margin-top-20 center align-items">
					<view @tap="save" style="padding: 15rpx 262rpx;"
						class="button color-FFF font-size-28 display-flex center align-items font-weight-500">
						保存资料
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		switchTab,
		navigateBack,
		setClipboardData
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const swiperlist = ref([])
	const userinfo = ref({})
	const income = ref({})
	const toolslist = ref([])
	const orderNavlist = ref({})
	const popup = ref(null)
	const name = ref('')
	const avatar = ref('')
	onLoad(function(option) {
		getorderNav()
		getAd()
		tools()
	});
	onShow(function() {
		getusercenter()
		getincome()
	});
	async function save() {
		let object = {
			headimg: userinfo.value.headimg,
			nickname: userinfo.value.nickname
		}
		const {code,data} = await api.save(object)
		if(code == 0){
			nativeUI('更新成功！')
			getusercenter()
			popup.value.close()
		}
	}
	function swiperClick(event) {
		navigateTo(swiperlist.value[event].link)
	}
	function onChooseAvatar(event) {
		console.log(event);
		uploadFilePromise(event.detail.avatarUrl)
	}
	/**
	 * @param {Object} url上传  路径
	 * 上传头像
	 */
	async function uploadFilePromise(url) {
		const {
			code,
			data
		} = await api.uploadFile(url)
		if (code == 0) {
			userinfo.value.headimg = data.image
			// setUser('headimg', data.image)
		}
	}
	async function setUser(field, value) {
		let object = {
			field,
			value
		}
		const {
			code,
			data
		} = await api.setUser(object)
		if (code == 0) {
			nativeUI('更新成功！')
			getusercenter()
		}
	}
	async function addPushUser() {
		const {
			code,
			data
		} = await api.addPushUser()
		if (code == 0) {
			// nativeUI('申请成功!')
			// navigateBack(2000)
			// uni.$emit('updateuserinfo')
			wx.openBusinessView({
				businessType: data.bind_business_type,
				queryString: data.bind_query_string,
				extraData: {
					commissionType: data.commissionType,
					commissionRatio: data.commissionRatio,
					headSupplierAppid: data.headSupplierAppid,
				}
			})
		}
	}
	async function tools() {
		const {
			code,
			data
		} = await api.tools({
			type: 1
		})
		if (code == 0) {
			toolslist.value = data
		}
	}
	/**
	 * 轮播图
	 */
	async function getAd() {
		let object = {
			cid: 2
		}
		const {
			code,
			data
		} = await api.getAd(object)
		if (code == 0) {
			swiperlist.value = data
		}
	}
	async function getincome() {
		const {
			code,
			data
		} = await api.income()
		if (code == 0) {
			income.value = data
		}
	}
	async function getusercenter() {
		const {
			code,
			data
		} = await api.getusercenter()
		if (code == 0) {
			userinfo.value = data
		}
	}
	async function getorderNav() {
		const {
			code,
			data
		} = await api.getorderNav()
		if (code == 0) {
			orderNavlist.value = data
		}
	}
	onReady(function() {
		
	});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.content{
		background-color: #f5f5f5;
	}
	.select-btn {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 22rpx;
		border-radius: 4rpx;
	}

	.select-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		color: #999;
		background: none;
		// border: none;
		border: 1px dotted #ccc;
		padding: 0;
		margin: 0;
	}

	.label {
		width: 308rpx;
		height: 36rpx;
		background: #F9F9F9;
		border-radius: 8rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #FB491F;
	}

	.order {
		padding: 24rpx;
		// background: linear-gradient(180deg, #FFF9FA 0%, #FFFFFF 100%);
		background: #FFF;
		border-radius: 24rpx;
	}

	.view {
		background: #FFFFFF;
		border-radius: 24rpx;
	}

	.button1 {
		width: 136rpx;
		height: 44rpx;
		// background: linear-gradient(270deg, #FDEACC 0%, #FFE3A7 100%);
		border-radius: 32rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #5C3C03;
	}

	.vip {
		width: 686rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #333333 0%, #1E1E1E 100%);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.button {
		width: 148rpx;
		height: 52rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 26rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.avatar {
		width: 104rpx;
		height: 104rpx;
		background: #F1F1F1;
		border: 4rpx solid #FFFFFF;
	}

	.item-view {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx;
	}

	.view {
		background: #FFFFFF;
		// box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.backGround {
		width: 750rpx;
		height: 452rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}
</style>